<script setup lang="ts">
import type { IStatisticsData } from '@/composables/useStatistic'
import IIconsCpu from '~icons/icons/cpu'
import IIconsDedicated from '~icons/icons/homeDedicated'
import IIconsMemory from '~icons/icons/memory'
import IIconsStorage from '~icons/icons/storage'

import CloudCard from './CloudCard.vue'

const showTotal = defineModel<boolean>('showTotal')
const data = defineModel<IStatisticsData>('data')

const statisticsData = computed(() => [
  {
    title: 'CPU',
    bgColor: '#F5F3FF',
    data: data.value?.cup_allocations,
    totalData: showTotal.value ? data.value?.cpuTotalData : undefined,
    type: '核数',
    icon: IIconsCpu,
  },
  {
    title: '内存',
    bgColor: '#FFFAF0',
    data: data.value?.memory_allocations,
    type: '内存',
    totalData: showTotal.value ? data.value?.memoryTotalData : undefined,
    showUnit: 'GB',
    icon: IIconsMemory,
  },
  {
    title: '存储',
    bgColor: '#F0F6FF',
    data: data.value?.storage_allocations,
    type: '存储',
    totalData: showTotal.value ? data.value?.storageTotalData : undefined,
    showUnit: 'GB',
    icon: IIconsStorage,
  },
  {
    title: '裸金属',
    bgColor: '#F3FAF3',
    data: data.value?.region_baremetal_list,
    totalData: showTotal.value ? data.value?.bakemeatsTotalData : undefined,
    type: showTotal.value ? '台数' : '量',
    icon: IIconsDedicated,
  },
])

const storageType = ref<string>('allocated')

function handleRadio(value: string) {
  storageType.value = value
}
</script>

<template>
  <div class="grid grid-cols-4 gap-x-4">
    <template
      v-for="item in statisticsData"
      :key="item"
    >
      <cloud-card
        :title="item.title"
        :bg-color="item.bgColor"
        :show-total="showTotal"
        :data="item.data"
        :type="item.type"
        :show-unit="item?.showUnit"
        :radio-type="storageType"
        :total-data="item?.totalData"
        :icon="item.icon"
      >
        <template
          v-if="item.title === '存储'"
          #customBtn
        >
          <a-radio-group
            v-model="storageType"
            type="button"
            size="small"
            class="resource-radio-btn"
            @change="handleRadio"
          >
            <a-radio value="allocated">
              已分配
            </a-radio>
            <a-radio value="realAllocate">
              实际使用
            </a-radio>
          </a-radio-group>
        </template>
      </cloud-card>
    </template>
  </div>
</template>

<style scoped lang="less">
.resource-radio-btn {
  @apply p-2px rounded-md bg-black/5;
  :deep(.arco-radio-button) {
    @apply text-xs m-0 py-2px rounded-md;
    &-content {
      @apply px-2;
    }
  }
}
</style>
